<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import {useGetIndexOrderInfoApi, useGetResultInfo} from "@/apis/order"
import { ref, computed } from 'vue';
import constant from "@/utils/constant"
import { useUserStore} from '@/store/user'

const userStore = useUserStore()
const orderInfo = ref<any>({})
const resultInfo = ref<any>({})
const imgurl = ref<any>("")
onLoad((e)=>{
	console.log(e?.id);
	useGetIndexOrderInfoApi(e?.id).then(res=>{

		orderInfo.value = res
		getResult(e?.id)
	})
})

function getResult(id: string){
	useGetResultInfo(id).then(res =>{
		resultInfo.value = res
	})
}
function endTask(){
	uni.navigateTo({
		url:"../../pages/order/field?data="+JSON.stringify(orderInfo.value)
	})
}
function getImg(val){
		uni.request({
			method: "GET",
			url: constant.imgUrl + "/" + val,
			header: { 
				Authorization: userStore.token,
			},
			data:{
				type: "base64"
			},
			success: (res: any) => {
				// imgurl.value = url
				imgurl.value = 'data:image/png;base64,' + res.data
			}

	})
}
const getImgUrl = computed(()=>{
		return imgurl.value
	})
</script>

<template>
	<view class="">
		<view class="backColor">
			<view class="task">{{orderInfo.name}}</view>
			<u-line margin="10rpx"/>
			<view class="item"><text>订单编号</text><text>{{orderInfo.id}}</text></view>
			<view class="item"><text>订单名称</text><text>{{orderInfo.name}}</text></view>
			<view class="item"><text>订单类型</text><text>{{orderInfo.typeName}}</text></view>
			<view class="item"><text>货物名</text><text>{{orderInfo.cargoName}}</text></view>
			<view class="item"><text>起点</text><text>{{orderInfo.loadingAddress}}</text></view>
			<view class="item"><text>终点</text><text>{{orderInfo.unloadingAddress}}</text></view>
			<view class="item"><text>货物分类代码</text><text>{{orderInfo.cargoTypeId}}</text></view>
			<!-- <view class="item"><text>预付款金额</text><text>{{orderInfo.amount}}</text></view> -->
			<view class="item"><text>预估完成时间</text><text>{{orderInfo.expectedTime}}</text></view>
			<view class="item"><text>保险公司</text><text>{{orderInfo.insurance}}</text></view>
			<view class="item"><text>保险单号</text><text>{{orderInfo.insuranceSn}}</text></view>
			<view class="item"><text>创建时间</text><text>{{orderInfo.createTime}}</text></view>
			<view v-if="resultInfo.id">
				<h1>还田信息</h1>
				<view class="item"><text>施用总量</text><text>{{resultInfo.totalAmount}}</text></view>
				<view class="item"><text>施用频次</text><text>{{resultInfo.frequency}}</text></view>
				<view class="item"><text>施用效果</text><text>{{resultInfo.result}}</text></view>
				<view class="item"><text>效果图片</text>
					<image :src="getImgUrl" style="width: 80rpx; height: 80rpx; margin: 20rpx 0;"/>
				</view>
			</view>
		</view>
			<u-button type="success" @click="endTask" :customStyle="{width: '400rpx'}" text="上传还田信息" v-if="orderInfo.projectStatus == 6 && !resultInfo.id"/>
	</view>
	
</template>

<style>
	page{
		background: linear-gradient(to bottom, #edd9fd 10% ,#d8c6e6 20%, #F8F8F8 100%);
	}
.item{
	display: flex;
	font-size: 28rpx;
}
.item > text{
	display: inline-block;
}
.item > text:first-child{
	
	min-width: 170rpx;
	margin-right: 50rpx;
	text-align: right;
}
.task{
		margin: 20rpx;
		text-align: center;
		font-size: 40rpx;
	}
	.task::before{
		content: "";
		background-image: url("../../static/img/任务.png");
		display: inline-block;
		background-size: cover;
		width: 40rpx;
		height: 40rpx;
		transform: translateY(9rpx) translateX(-10rpx);
	}
	.backColor{
		background-color: #F8F8F8;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 10rpx;
	}
</style>